<template>
  <div 
    class="slot-card"
    :class="{ 'slot-error': isSlotError }"
  >
    <!-- 槽位头部信息 -->
    <div class="slot-header">
      <div class="slot-number">
        <i class="el-icon-s-grid"></i>
        {{ slotData.slotNumber }}
      </div>
      <div class="header-actions">
        <el-button 
          type="text" 
          icon="el-icon-setting" 
          size="mini" 
          @click="openSettingDialog"
          class="setting-btn"
        >
          设置
        </el-button>
        <div class="door-status">
        <el-tag 
          :type="slotData.powerBoxDoorOpen ? 'danger' : 'success'" 
          size="mini"
          class="door-tag"
        >
          <i class="el-icon-unlock" v-if="slotData.powerBoxDoorOpen"></i>
          <i class="el-icon-lock" v-else></i>
          电源箱门{{ slotData.powerBoxDoorOpen ? '开' : '关' }}
        </el-tag>
        <el-tag 
          :type="slotData.controllerDoorOpen ? 'danger' : 'success'" 
          size="mini"
          class="door-tag"
        >
          <i class="el-icon-unlock" v-if="slotData.controllerDoorOpen"></i>
          <i class="el-icon-lock" v-else></i>
          槽控机门{{ slotData.controllerDoorOpen ? '开' : '关' }}
        </el-tag>
        </div>
      </div>
    </div>
    
    <!-- 点位状态展示 -->
    <div class="points-container">
      <div 
        v-for="point in slotData.pointInfos" 
        :key="point.pointNumber"
        class="point-item"
        :class="{ 
          'point-discharge': point.dischargeStatus,
          'point-jam': point.jamStatus,
          'point-normal': !point.dischargeStatus && !point.jamStatus
        }"
      >
        <div class="point-content">
          <span class="point-number">{{ point.pointNumber }}</span>
          <span v-if="point.dischargeStatus" class="status-discharge">
            <i class="el-icon-download"></i>
            下料
          </span>
          <span v-else-if="point.jamStatus" class="status-jam">
            <i class="el-icon-warning"></i>
            卡堵
          </span>
          <span v-else class="status-normal">
            <i class="el-icon-check"></i>
            正常
          </span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  name: 'SlotCard',
  props: {
    slotData: {
      type: Object,
      required: true,
      validator(value) {
        return value && 
               value.slotNumber !== undefined && 
               value.pointInfos !== undefined;
      }
    }
  },
  computed: {
    /** 判断槽位是否有异常 */
    isSlotError() {
      return this.slotData.powerBoxDoorOpen || this.slotData.controllerDoorOpen;
    }
  },
  methods: {
    /** 打开设置对话框 */
    openSettingDialog() {
      this.$emit('open-setting', this.slotData);
    }
  }
}
</script>

<style scoped>
.slot-card {
  border: 1px solid #67c23a;
  border-radius: 6px;
  padding: 10px;
  background: #f0f9ff;
  transition: all 0.3s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: relative;
}

.slot-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.slot-card.slot-error {
  border-color: #f56c6c;
  background: #fef0f0;
}

.slot-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid #ebeef5;
}

.slot-number {
  font-weight: bold;
  color: #303133;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 3px;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}

.setting-btn {
  padding: 4px 8px;
  color: #409eff;
  font-size: 12px;
  flex-shrink: 0;
}

.setting-btn:hover {
  color: #66b1ff;
}

.door-status {
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  align-items: center;
}

.door-tag {
  display: flex;
  align-items: center;
  gap: 3px;
}

.points-container {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
}

.point-item {
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  padding: 6px;
  text-align: center;
  background: #f5f7fa;
  transition: all 0.3s;
  position: relative;
}

.point-item:hover {
  transform: scale(1.05);
}

.point-item.point-discharge {
  background: #e1f3d8;
  border-color: #67c23a;
}

.point-item.point-jam {
  background: #fde2e2;
  border-color: #f56c6c;
}

.point-item.point-normal {
  background: #f0f9ff;
  border-color: #409eff;
}

.point-content {
  display: flex;
  align-items: center;
  gap: 2px;
  justify-content: center;
}

.point-number {
  font-weight: bold;
  color: #303133;
  font-size: 11px;
  flex-shrink: 0;
}

.status-discharge {
  color: #67c23a;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 1px;
}

.status-jam {
  color: #f56c6c;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 1px;
}

.status-normal {
  color: #409eff;
  font-weight: bold;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 1px;
}


/* 响应式设计 */
@media (max-width: 768px) {
  .points-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
</style>
